<template>
  <div class="comPage">
    <el-form
      :inline="true"
      :model="formInline"
      label-position="right"
      label-width="auto"
      class="formALL"
      :rules="rules"
    >
      <!-- :label-width="labelWidth" -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="关联疾病： ">
            <el-input v-model="formInline.name" placeholder="请选择擅长疾病标签" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="擅长疾病： ">
            <el-input v-model="formInline.name" placeholder="输入查询疾病分类/疾病名称" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否线上推荐： ">
            <el-radio-group v-model="formInline.text1">
              <el-radio value="0">是</el-radio>
              <el-radio value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否添加邀请码： ">
            <el-radio-group v-model="formInline.text2">
              <el-radio value="0">是</el-radio>
              <el-radio value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否优先审方： ">
            <el-radio-group v-model="formInline.text3">
              <el-radio value="0">是</el-radio>
              <el-radio value="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生封面图片： ">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">上传图片</div>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生介绍视频： ">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">上传封面</div>
              </div>
            </el-upload>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              style="margin-left: 20px"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">上传视频</div>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="医生营销活动封面图片： ">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">上传图片</div>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传诊所关联医助企微二维码： ">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="formInline.imageUrl" :src="formInline.imageUrl" class="avatar" />
              <div class="upLoadImg">
                <img class="addImg" src="/src/assets/addIm g.png" alt="" />
                <div class="title">上传图片</div>
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="可用药房： " />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
import {
  ElForm,
  ElInput,
  ElRow,
  ElCol,
  ElFormItem,
  ElRadio,
  ElRadioGroup,
  ElUpload
} from 'element-plus'
import { ref, reactive, toRaw } from 'vue'
// 获取实例的引用，用于调用upload1.submit进行手动上传
const formInline = reactive({
  text2: '0',
  text3: '1'
})
const formSize = ref('default')
const imageUrl = ref('')
const labelWidth = ref('160px')
</script>

<style lang="less" scoped>
::v-deep(.el-input) {
  width: 400px;
  height: 40px;
}

::v-deep(.el-select) {
  width: 400px;
}

::v-deep(.el-select__wrapper) {
  height: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

//上传的样式
.upLoadImg {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  text-align: center;
  width: 120px;
  padding: 10px 15px;

  .title {
    font-size: 12px;
    color: #8c939d;
  }

  .addImg {
    width: 40px;
    height: 40px;
  }
}
</style>
